<template>
  <div class="ma-content-block lg:flex justify-between">
    <!-- CRUD 组件 -->
    <sa-table ref="crudRef" :options="options" :columns="columns" :searchForm="searchForm">
      <!-- 搜索区 tableSearch -->
      <template #tableSearch>
        <a-col :sm="8" :xs="24">
          <a-form-item field="uuid" label="用户ID">
            <a-input v-model="searchForm.uuid" placeholder="请输入用户ID" allow-clear />
          </a-form-item>
        </a-col>
        <a-col :sm="8" :xs="24">
          <a-form-item field="user_keyword" label="用户信息搜索">
            <a-input v-model="searchForm.user_keyword" placeholder="请输入用户手机号/昵称" allow-clear />
          </a-form-item>
        </a-col>
        <a-col :sm="8" :xs="24">
          <a-form-item field="community_uuid" label="团长ID">
            <a-input v-model="searchForm.community_uuid" placeholder="请输入团长ID" allow-clear />
          </a-form-item>
        </a-col>
        <a-col :sm="8" :xs="24">
          <a-form-item field="type" label="类型">
            <sa-select v-model="searchForm.type" placeholder="请选择类型" dict="balance_info" />
          </a-form-item>
        </a-col>
      </template>

      <!-- Table 自定义渲染 -->
      <!-- 状态列 -->
      
      <template #id="{ record }">
        <div style="display: flex;align-items: center;">
          <a-image :src="record?.avatar" :preview-src-list="[record?.avatar]" style="width: 48px; height: 48px; margin-right: 8px;" />
          <div>
            <div>{{ record?.nickname }}</div>
            <div>{{ record?.phone ||'--'}}</div>
            <div>ID:{{ record?.uuid }}</div>
          </div>
        </div>
      </template>
      <template #form_info="{ record }">
        <div v-if="record.community_info" style="display: flex;align-items: center;">
          <a-image :src="record.community_info?.avatar" :preview-src-list="[record.form_info?.avatar]" style="width: 48px; height: 48px; margin-right: 8px;" />
          <div>
            <div>{{ record.community_info?.nickname }}</div>
            <div>ID:{{ record.community_info?.id }}</div>
          </div>
        </div>
        <div v-else>--</div>
      </template>
      
    </sa-table>


  </div>
</template>

<script setup>
import { onMounted, ref, reactive } from 'vue'
import { Message } from '@arco-design/web-vue'
import api from '@/api/marketing/banner'

const crudRef = ref()
const created_time = ref([])
// 搜索表单
const searchForm = ref({
  uuid: '',
  user_keyword: '',
  community_uuid: '',
  type: '',

})

// 搜索时间
const SearchTime = (val) => {
  searchForm.value.created_at_start_time = val[0]
  searchForm.value.created_at_end_time = val[1]
}

// 修改状态
const changeStatus = async (status, id) => {
  const response = await api.changeStatus({ id, status })
  if (response.code === 200) {
    Message.success(response.message)
    crudRef.value.refresh()
  }
}

// SaTable 基础配置
const options = reactive({
  api: api.FundLogList,
  rowSelection: { showCheckedAll: true },
})

// SaTable 列配置
const columns = reactive([
  { title: '用户信息', dataIndex: 'id', width:240 },
  { title: '上级信息', dataIndex: 'form_info', width: 240 },
  { title: '类型', dataIndex: 'type',dict: 'balance_info',type:'dict', width: 100 },
  { title: '金额', dataIndex: 'price', width: 120 },
  { title: '操作前', dataIndex: 'before', width: 120 },
  { title: '操作后', dataIndex: 'after', width: 120 },
  { title: '备注', dataIndex: 'content', width: 200 },
  { title: '创建时间', dataIndex:'created_at', width:180},
  { title: '操作', dataIndex: '__operation', width: 0 },
])

// 页面数据初始化
const initPage = async () => {}

// SaTable 数据请求
const refresh = async () => {
  crudRef.value?.refresh()
}

// 页面加载完成执行
onMounted(async () => {
  initPage()
  refresh()
})
</script>
